<!-- 圆角 -->
<template>
    <layout-pane label="圆角">
        <si-input-number
            v-model="borderRadius"
            :min="0"
            unit="px"
        />
        <el-button text bg type="primary" @click="onBorderCircle">设为圆角</el-button>
    </layout-pane>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '../../layout-pane'
import SiInputNumber from '../si-input-number'
export default defineComponent({
    name: 'SiBorderRadius',
    components: {
        LayoutPane,
        SiInputNumber
    },
    props: {
        modelValue: {
            type: String
        }
    },
    emits: [
        'update:modelValue',
        'circle'
    ],
    setup(props, { emit }) {
        const { modelValue } = toRefs(props)

        const borderRadius = computed({
            get: () => modelValue.value,
            set: val => emit('update:modelValue', val)
        })

        const onBorderCircle = () => {
            borderRadius.value = '50%'
            emit('circle')
        }

        return {
            borderRadius,
            onBorderCircle
        }
    }
})
</script>